<div class="md-input-wrapper">
  <div class="md-input-table">
    <div class="md-input-prefix"><ng-content select="[md-prefix]"></ng-content></div>

    <div class="md-input-infix">
      <input #input
             aria-target
             class="md-input-element"
             [class.md-end]="align == 'end'"
             [attr.aria-label]="ariaLabel"
             [attr.aria-labelledby]="ariaLabelledBy"
             [attr.aria-disabled]="ariaDisabled"
             [attr.aria-required]="ariaRequired"
             [attr.aria-invalid]="ariaInvalid"
             [attr.autocomplete]="autoComplete"
             [autofocus]="autoFocus"
             [disabled]="disabled"
             [id]="inputId"
             [attr.list]="list"
             [attr.max]="max"
             [attr.maxlength]="maxLength"
             [attr.min]="min"
             [attr.minlength]="minLength"
             [readonly]="readOnly"
             [required]="required"
             [spellcheck]="spellCheck"
             [attr.step]="step"
             [attr.tabindex]="tabIndex"
             [type]="type"
             [attr.name]="name"
             (focus)="handleFocus($event)"
             (blur)="handleBlur($event)"
             [(ngModel)]="value"
             (change)="handleChange($event)">

      <label class="md-input-placeholder"
             [attr.for]="inputId"
             [class.md-empty]="empty"
             [class.md-focused]="focused"
             [class.md-float]="floatingPlaceholder"
             [class.md-accent]="dividerColor == 'accent'"
             [class.md-warn]="dividerColor == 'warn'"
             *ngIf="hasPlaceholder()">
        <ng-content select="md-placeholder"></ng-content>
        {{placeholder}}
        <span class="md-placeholder-required" *ngIf="required">*</span>
      </label>
    </div>

    <div class="md-input-suffix"><ng-content select="[md-suffix]"></ng-content></div>
  </div>

  <div class="md-input-underline"
       [class.md-disabled]="disabled">
    <span class="md-input-ripple"
          [class.md-focused]="focused"
          [class.md-accent]="dividerColor == 'accent'"
          [class.md-warn]="dividerColor == 'warn'"></span>
  </div>

  <div *ngIf="hintLabel != ''" class="md-hint">{{hintLabel}}</div>
  <ng-content select="md-hint"></ng-content>
</div>
